const app = getApp();
import grace from "../../../utils/grace.js";
import * as echarts from '../../../utils/ec-canvas/echarts';

function setOption(chart, data) {
  var option = {
    backgroundColor: "#ffffff",
    color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F", "#D46BF2", "#BAFF40", "#722BFF"],
    series: [{
      label: {
        normal: {
          fontSize: 12
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: [0, '60%'],
      data: data,
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 2, 2, 0.3)'
        }
      }
    }]
  };

  chart.setOption(option);
}

grace.page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {}
  },
  onReady: function () {
    // 获取组件
    this.ecComponent = this.selectComponent('#mychart-dom-pie');
  },
  onLoad(){
    let that = this;
    let school_id = wx.getStorageSync('school_id')
    wx.showLoading({
      title: '加载中...',
    })
    let url = app.globalData.api + '/api/v1.0/report/student/' + school_id;
    that.$http.get(url, { token: wx.getStorageSync('token') }).then((res) => {
      if (res.data.code == 0) {
        that.echartInit(res.data.data);
      } else if (res.data.code == 10001) {
        wx.navigateTo({
          url: "/pages/common/authorize/index"
        })
      }
      wx.hideLoading();
    }).catch(err => {
      console.log(err.status, err.message);
    });
  },
  echartInit (data) {
    this.ecComponent.init((canvas, width, height) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      setOption(chart, data);

      // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
      this.chart = chart;

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  }
})